<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品交接单</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        span.bank5
        {
            padding-left:15px;
        }
        span.bank45
        {
            padding-left:45px;
        }
    </style>
</head>
<body>
<div id="app">
    <center>
        <h1 style="margin-bottom: 1.2cm;margin-top: 1.2cm">{{company}}公司交接单</h1>
    </center>
    <!--分页查询-->
    <div align="center" style="margin-bottom: 0.5cm">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="PageSize"
                layout="total, prev, pager, next,sizes, jumper"
                :total="totalCount"
        ></el-pagination>
    </div>
    <!--表格-->
    <template>
        <el-table
                :data="iProductHandovers"
                border
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    label="交接单号">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                    prop="orderId"
                    label="订单编号">
            </el-table-column>
            <el-table-column
                    prop="productName"
                    label="产品名称">
            </el-table-column>
            <el-table-column
                    prop="orderId"
                    label="生产部门">
            </el-table-column>
            <el-table-column
                    prop="wareName"
                    label="收货仓库">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="入库数量">
            </el-table-column>
            <el-table-column
                    prop="handoverDate"
                    label="交接日期">
            </el-table-column>
            <el-table-column
                    prop="head"
                    label="交接人">
            </el-table-column>
            <el-table-column
                    label="备注">
                <template slot-scope="scope">
                    <span v-if="scope.row.remake != null">{{ scope.row.remake }}</span>
                    <span v-else>无备注</span>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <div style="margin-top: 2cm;text-align:right">
        <span style="text-align:right">打印时间：{{time}}</span>
        <span class="bank15"></span>
        <span>操作者：{{people}}</span>
        <span class="bank45"></span>
    </div>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data(){
            return{
                totalCount: 10,  //默认数据总数
                company: null,
                time: null,
                people: null,
                dialogFormVisible: false,  //对话框
                iProductHandovers: null,
                currentPage: 1,  //当前页码
                start: 1,       //查询的页码
                pageSizes: [7,10,20,30],
                PageSize: 7, //默认每页数据量
                select: '',    //下拉菜单选项
            }
        },
        methods:{
            //点击不同的页数，即改变当前的页数
            handleCurrentChange(val){
            },
            //每页显示的条数，也就是上图选择框内的数据
            handleSizeChange(val){
                // 改变每页显示的条数
                this.PageSize=val;
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1;
            },
            //查询公司名、用户名、打印时间和打印的交接单
            selectPrintHandoverForm(){
                axios.get("/selectUser").then(value => {
                    if (value.data.code == 1){
                        this.company = value.data.msg;
                        this.people = value.data.data.username;
                        axios.get("/PrintHandover").then(value1 => {
                            this.time = value1.data.msg;
                            this.totalCount = value1.data.code;
                            this.iProductHandovers = value1.data.data;
                        })
                    }
                })
            }
        },
        mounted(){
            this.selectPrintHandoverForm();
        }
    })
</script>
</body>
</html>